<!-- 基本信息 -->
<template>
	<el-container>
		<el-header>
			<NavMenu activeIndex="2" />
		</el-header>
		<el-container>
			<el-main>
				<el-affix target=".el-main" :offset="60">
					<el-button text :icon="UploadFilled" @click="onSave">保存</el-button>
					<el-button text :icon="Printer" @click="onPrint">打印</el-button>
				</el-affix>
				<div class="paper">
					<div class="paper-header">患者个人基本信息</div>
					<div class="paper-row">
						<div class="flex-center font-bold" style="flex-basis: 8%;">No：</div>
						<div class="flex-left font" style="flex-basis: 16%;">{{patientID}}</div>
						<div style="flex-grow: 1;" />
						<div class="flex-center font-bold" style="flex-basis: 8%;">填写时间：</div>
						<div class="flex-left font" style="flex-basis: 16%;">2020-12-30 19:29</div>
					</div>
					<div class="frame" style="aspect-ratio: 1 / 1;">
						<div class="form-block">
							<div class="form-photoblock-rows">
								<div class="form-photoblock-row">
									<div class="form-label" style="flex-basis: 8%;">姓名：</div>
									<div class="form-value" style="flex-basis: 24%;">
										<input v-model="name" />
									</div>
									<div class="form-label" style="flex-basis: 16%;">性别：</div>
									<div class="form-select" style="flex-basis: 12%;">
										<select v-model="sex" placeholder="">
											<option value="男">男</option>
											<option value="女">女</option>
											<option value=""></option>
										</select>
									</div>
									<div class="form-label" style="flex-basis: 16%;">出生日期：</div>
									<div class="form-date" style="flex-grow: 1; flex-shrink: 1;">
										<el-date-picker v-model="birthday" type="date" />
									</div>
								</div>
								<div class="form-photoblock-row">
									<div class="form-label" style="flex-basis: 8%;">电话：</div>
									<div class="form-value" style="flex-basis: 24%;">
										<input v-model="tel" />
									</div>
									<div class="form-label" style="flex-basis: 16%;">身份证号：</div>
									<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
										<input v-model="cardID" />
									</div>
								</div>
							</div>
							<div class="form-photo">头像</div>
						</div>
						<div>
							
						</div>
					</div>
				</div>
			</el-main>
			<el-aside style="border-left: var(--el-border);">
				
			</el-aside>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import axiosInstance from '@/Config/axiosConfig'
	import globalStore from '@/store/GlobalStore';
	import Emessage from '@/Utils/Message';
	import { ElNotification } from 'element-plus';
	import { UploadFilled, Printer } from '@element-plus/icons-vue';
	import '@/pages/doctor/styles/common.scss';
	import '@/pages/doctor/styles/form.scss';
	import { integer2sex, sex2integer } from '@/pages/doctor/scripts/common.ts';
	import NavMenu from '@/pages/doctor/components/NavMenu';

	const doctorCurrentPatient = uni.getStorageSync('doctorCurrentPatient');
	if (!doctorCurrentPatient) {
		uni.redirectTo({url:'/pages/doctor/queue'});
	}
	const regID = doctorCurrentPatient.regID;
	const patientID = doctorCurrentPatient.patientID;
	
	// 基本信息
	const name = ref('');
	const sex = ref('');
	const birthday = ref('');
	const tel = ref('');
	const cardID = ref('');
	
	const getFormData = async () => {
		// 获取病人信息
		try {
			const response = await axiosInstance.get('/doc/getPatientDetailById?patientId='+patientID);
			if (response.status == 200) {
				const data = response.data;
				name.value = data.name;
				sex.value = integer2sex(data.sex);
				birthday.value = data.birthday;
				tel.value = data.tel;
				cardID.value = data.id;
			} else {
				ElNotification({title: response.status, message: response.statusText, type: 'error', duration: 3000});
			}
		} catch (e) {
			ElNotification({title: '错误', message: '无法连接服务器！', type: 'error', duration: 3000});
		}
	};

	const onSave = async () => {
		// 保存病人信息
		try {
			const response = await axiosInstance.post('/doc/updatePatientByRegId?regId=' + regID, {
				id: cardID.value,
				name: name.value,
				birthday: birthday.value,
				sex: sex2integer(sex.value),
				tel: tel.value,
			});
			if (response.status == 200) {
				const data = response.data;
				ElNotification({ title: '保存', message: '成功保存病人的个人基本信息。', type: 'success', duration: 3000 });
			} else {
				ElNotification({ title: response.status, message: response.statusText, type: 'error', duration: 3000 });
			}
		} catch (e) {
			ElNotification({ title: '错误', message: '无法连接服务器！', type: 'error', duration: 3000 });
		}
		getFormData();
	};
	
	const onPrint = () => {
		Emessage("TODO: 打印病人信息", "error");
	};
	
	getFormData();
</script>

<style lang="scss" scoped>

</style>